<template>
  <div id="app">
    <div class="content">
      <div class="myimg">
        <img src="../assets/76cceb75227d61484a71f419811b24d.png" alt="" />
      </div>
      <div class="input">
        <div class="style">
          <div class="div1">
            <img src="../assets/5d57b90f47f3b3b9db0a949b4a62846.png" alt="" />
            <h1>小羊驼餐饮管理</h1>
          </div>
          <input
            v-model="userObj.username"
            type="text"
            placeholder="请输入账号"
            clearable
          />
          <br />
          <input
            v-model="userObj.password"
            type="password"
            placeholder="请输入密码"
            clearable
          />
          <br />
          <el-button
            @click="loginUser"
            type=""
            style="background-color: #ff6000"
            >马上登录</el-button
          >
          <br />
          <div class="end">
            <span class="end1">忘记密码</span>
            <span class="end2">注册</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import storage from '../utils/storage.js'
import * as api from '../utils/api'
export default {
  name: 'login',
  data() {
    return {
      userObj: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    loginUser() {
      this.axios({
        method: 'post',
        url: api.POST_LOGIN,
        data: this.userObj
      }).then(data => {
        if (data.data.code == 200) {
          storage.setStorage('user', data.data.user)
          this.$router.push('/home')
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
#app {
  background-image: url("../assets/04eca548070c0877453e1170a1645f0.png");
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app .content {
  height: 430px;
  width: 80%;
  background-color: white;
}
#app .content .myimg {
  height: 100%;
  width: 500px;
  float: left;
}
#app .content .myimg img {
  height: 100%;
  width: 100%;
}
#app .content .input {
  float: right;
  height: 100%;
  width: 500px;
}
#app .content .input .style {
  text-align: center;
}
#app .content .input .style .div1 {
  height: 100px;
  padding: 3% 20% 0 20%;
}
#app .content .input .style .div1 h1 {
  color: #ff6000;
  height: 75px;
  line-height: 75px;
  float: right;
  letter-spacing: 3px;
}
#app .content .input .style .div1 img {
  height: 70px;
  line-height: 50px;
  width: 50px;
  float: left;
}
#app .content .input .style input {
  width: 370px;
  height: 45px;
  margin: 10px auto;
  outline: none;
}
.el-button {
  border: none;
  color: white;
  width: 370px;
  height: 50px;
  margin: 10px auto;
}
.el-button:hover {
  color: #c54e04;
}
#app .content .input .style .end {
  width: 370px;
  height: 20px;
  margin: 10px auto;
}
#app .content .input .style .end .end1 {
  float: left;
  color: #c8c8c8;
  cursor: pointer;
}
#app .content .input .style .end .end2 {
  float: right;
  color: #c8c8c8;
  cursor: pointer;
}
</style>